<template>
  <div>
    {{ options }}
    <br/>
    {{ allList }}
    <el-select :clearable="true" v-model="value" placeholder="请选择" @change="selectChange">
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      @select="checkSelect">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="id"
        width="120">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column
        label="章节id"
        width="120">
        <template slot-scope="scope">{{ scope.row.chapterId }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData3[1], tableData3[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection2()">取消选择</el-button>
    <el-button @click="choseId()">选中id为5的</el-button>
  </div>
  </div>
</template>
<script>
import $ from "jquery";
export default {
  data() {
    return {
      options: [
        {
          name: "第一章",
          id: 1,
          idList: []
        },
        {
          name: "第二章",
          id: 2,
          idList: []
        }
      ],
      allList: [],
      value: "",
      tableData: [],
      resData: [
        [
          {
            id: "1",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "2",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "3",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "4",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "2"
          },
          {
            id: "5",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "2"
          },
          {
            id: "6",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "7",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "2"
          }
        ],
        [
          {
            id: "1",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "2",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "3",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          },
          {
            id: "6",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "1"
          }
        ],
        [
          {
            id: "4",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "2"
          },
          {
            id: "5",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "2"
          },
          {
            id: "7",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            chapterId: "2"
          }
        ]
      ],
      multipleSelection: []
    };
  },
  watch: {
    value(val) {
      console.log("计算了一次");
      let that = this;
      let options = that.options;
      let cValue = that.value;
      let resData = that.resData;
      let result = [];
      let resIndex = 0;
      console.log(cValue);
      if (val == 1) {
        this.tableData = this.resData[1];
      } else if (val == 2) {
        this.tableData = this.resData[2];
      } else {
        this.tableData = this.resData[0];
      }

      //不是所有章节
      if (cValue) {
        let chapterIndex = cValue - 1;
        result = options[chapterIndex].idList;
        resIndex = cValue;
      } else {
        //所有章节
        result = that.allList;
        resIndex = 0;
      }
      let resultArr = result.map(item => {
        let obj = resData[resIndex].find(value => {
          return item == value.id;
        });
        console.log(obj, 123);
        that.$nextTick(() => {
          that.$refs.multipleTable.toggleRowSelection(obj, true);
        });
      });
      // $.each(options, function(i, d) {
      //   if (cValue) {
      //     let result = d.idList;
      //     let resultArr = result.map(item => {
      //       let obj = tableData3.find(value => {
      //         return item == value.id;
      //       });
      //       that.$refs.multipleTable.toggleRowSelection(obj);
      //     });
      //   }
      // });
      console.log(cValue);
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.tableData = this.tableData1;
      //this.searchArr();
      //this.choseId();
    },
    //切换章节
    selectChange(val) {
      // console.log(val);
      // if (val == 1) {
      //   this.tableData = this.tableData2;
      // } else if (val == 2) {
      //   this.tableData = this.tableData3;
      // } else {
      //   this.tableData = this.tableData1;
      // }
      // console.log("计算了一次");
      // let that = this;
      // let options = that.options;
      // let arr = [1, 2, 3, 4, 5, 6, 7];
      // let result = [1, 5, 3];
      // let cValue = that.value;
      // console.log(cValue);
      // let tableData1 = that.tableData1;
      // let tableData2 = that.tableData2;
      // let tableData3 = that.tableData3;
      // //查找id为1,5,3的对象，然后勾选
      // if (cValue == 1) {
      //   let result = options[0].idList;
      //   let resultArr = result.map(item => {
      //     let obj = tableData2.find(value => {
      //       return item == value.id;
      //     });
      //     console.log(obj, 123);
      //     that.$nextTick(() => {
      //       that.$refs.multipleTable.toggleRowSelection(obj, true);
      //     });
      //   });
      // } else if (cValue == 2) {
      //   let result = options[1].idList;
      //   let resultArr = result.map(item => {
      //     let obj = tableData3.find(value => {
      //       return item == value.id;
      //     });
      //     that.$nextTick(() => {
      //       that.$refs.multipleTable.toggleRowSelection(obj, true);
      //     });
      //   });
      // } else {
      //   //this.tableData = this.tableData1;
      // }
      // // $.each(options, function(i, d) {
      // //   if (cValue) {
      // //     let result = d.idList;
      // //     let resultArr = result.map(item => {
      // //       let obj = tableData3.find(value => {
      // //         return item == value.id;
      // //       });
      // //       that.$refs.multipleTable.toggleRowSelection(obj);
      // //     });
      // //   }
      // // });
      // console.log(cValue);
    },
    choseId() {
      let that = this;
      let tableData3 = that.tableData3;

      let arr = [1, 2, 3, 4, 5, 6, 7];

      let result = [1, 5, 3];
      //查找id为1,5,3的对象，然后勾选
      let resultArr = result.map(item => {
        let obj = tableData3.find(value => {
          return item == value.id;
        });
        that.$refs.multipleTable.toggleRowSelection(obj);
      });

      console.log(resultArr);
    },
    searchArr() {},
    toggleSelection(rows) {
      console.log(rows);
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    toggleSelection2() {
      let obj = this.tableData3[1];
      let obj2 = {
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄"
      };
      this.$refs.multipleTable.toggleRowSelection(obj2);
    },
    handleSelectionChange(val) {
      // let that = this;
      // let cValue = that.value;
      // let options = that.options;
      // console.log(rows, 123123);
      // $.each(options, function(i, d) {
      //   $.each(rows, function(i2, d2) {
      //     //找到属于这个章节的并且章节中没有这个id
      //     let a = d.idList.find(item => item == d2.chapterId);
      //     console.log(a);
      //     if (d.id == d2.chapterId && !d.idList.find(item => item == d2.id)) {
      //       d.idList.push(d2.id);
      //     }
      //   });
      // });
    },
    //单选的时候
    checkSelect(rows, row) {
      let that = this;
      let options = that.options;
      let allList = that.allList;
      //选中状态
      let selected = rows.length && rows.indexOf(row) !== -1;

      //章节id
      let chapterId = row.chapterId;
      //题目id
      let id = row.id;
      let obj = options.find(item => item.id == chapterId);
      //选中
      if (selected) {
        obj.idList.push(id);
        //所有
        allList.push(id);
        console.log(obj, 66544);
      } else {
        //取消选中
        obj.idList.splice(obj.idList.findIndex(item => item.id == id), 1);
        allList.splice(allList.findIndex(item => item.id == id), 1);
      }
    }
  }
};
</script>
